/** * 基础菜单 商品管理 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品类型管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="searchForm" class="user-search">
      <el-form-item label="搜索：">
        <el-input
          size="small"
          v-model="searchForm.searchKey"
          placeholder="搜索关键词"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
          >搜索</el-button
        >
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleEdit()"
          >添加</el-button
        >
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
      size="small"
      :data="listData"
      :key="randomIndex"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%;"
    >
      <template v-for="(item, index) in columnRecords">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :key="index"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row[item.prop] }}
          </template>
        </el-table-column>
      </template>
      <el-table-column align="center" label="操作" fixed="right" min-width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="deleteUser(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="paginaChange"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog
      :title="title"
      :visible.sync="editFormVisible"
      width="60%"
      @click="closeDialog"
    >
      <el-form
        label-width="180px"
        :model="editForm"
        :rules="rules"
        inline
        ref="editForm"
      >
        <template v-for="(item, index) in columnRecords">
          <el-form-item :label="item.label" :prop="item.label" :key="index">
            <el-input
              size="small"
              v-model="editForm[item.label]"
              auto-complete="off"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="submitForm(editForm)"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: "添加",
      editForm: {
        id: 0,
        DrillholeName: "",
        Northing: "",
        Easting: "",
        Surface: "",
        TopElev: "",
        BotElev: "",
        TopDepth: "",
        BotDepth: "",
        Thick: "",
        StrataName: "",
        StrataNameFull: "",
        BedName: "",
        COAL_THK: "",
        CUM_COAL_THK: "",
        CUM_STRIP_RATIO: ""
      },
      columnRecords: [
        {
          label: "DrillholeName",
          prop: "DrillholeName"
        },
        { label: "Northing", prop: "Northing" },
        { label: "Easting", prop: "Easting" },
        { label: "Surface", prop: "Surface" },
        { label: "TopElev", prop: "TopElev" },
        { label: "BotElev", prop: "BotElev" },
        { label: "TopDepth", prop: "TopDepth" },
        { label: "BotDepth", prop: "BotDepth" },
        { label: "Thick", prop: "Thick" },
        { label: "StrataName", prop: "StrataName" },
        { label: "StrataNameFull", prop: "StrataNameFull" },
        { label: "BedName", prop: "BedName" },
        { label: "COAL_THK", prop: "COAL_THK" },
        { label: "CUM_COAL_THK", prop: "CUM_COAL_THK" },
        { label: "CUM_STRIP_RATIO", prop: "CUM_STRIP_RATIO" }
      ],
      // rules表单验证
      rules: {
        DrillholeName: [{ required: true, message: "请输入", trigger: "blur" }],
        Northing: [{ required: true, message: "请输入", trigger: "blur" }],
        Easting: [{ required: true, message: "请输入", trigger: "blur" }],
        Surface: [{ required: true, message: "请输入", trigger: "blur" }],
        TopElev: [{ required: true, message: "请输入", trigger: "blur" }],
        BotElev: [{ required: true, message: "请输入", trigger: "blur" }],
        TopDepth: [{ required: true, message: "请输入", trigger: "blur" }],
        BotDepth: [{ required: true, message: "请输入", trigger: "blur" }],
        Thick: [{ required: true, message: "请输入", trigger: "blur" }],
        StrataName: [{ required: true, message: "请输入", trigger: "blur" }],
        StrataNameFull: [
          { required: true, message: "请输入", trigger: "blur" }
        ],
        BedName: [{ required: true, message: "请输入", trigger: "blur" }],
        COAL_THK: [{ required: true, message: "请输入", trigger: "blur" }],
        CUM_COAL_THK: [{ required: true, message: "请输入", trigger: "blur" }],
        CUM_STRIP_RATIO: [
          { required: true, message: "请输入", trigger: "blur" }
        ]
      },
      searchForm: {
        searchKey: ""
      },
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      },
      randomIndex: 0
    };
  },
  // 注册组件
  components: {
    Pagination
  },
  created() {
    this.getdata(this.formInline);
  },
  methods: {
    /** 页数改变 页码改变回调 */
    paginaChange(params){
      this.pageparm = {...params};
      // 执行查询
    },
    timeOutHandle() {
      const _this = this;
      this.loading = true;
      setTimeout(() => {
        _this.loading = false;
      }, 500);
    },
    getdata(parameter) {
      let res = {
        code: 0,
        msg: null,
        count: 5,
        data: [
          {
            id: 1,
            DrillholeName: "396140",
            Northing: "5245130.3",
            Easting: "686461.55",
            Surface: "2326",
            TopElev: "2326",
            BotElev: "2222.5",
            TopDepth: "0",
            BotDepth: "103.5",
            Thick: "103.5",
            StrataName: "137",
            StrataNameFull: "claystone",
            BedName: "0",
            COAL_THK: "0",
            CUM_COAL_THK: "0",
            CUM_STRIP_RATIO: "0"
          },
          {
            id: 2,
            DrillholeName: "396140",
            Northing: "5245130.3",
            Easting: "686461.55",
            Surface: "2326",
            TopElev: "2326",
            BotElev: "2222.5",
            TopDepth: "0",
            BotDepth: "103.5",
            Thick: "103.5",
            StrataName: "137",
            StrataNameFull: "claystone",
            BedName: "0",
            COAL_THK: "0",
            CUM_COAL_THK: "0",
            CUM_STRIP_RATIO: "0"
          }
        ]
      };
      this.timeOutHandle();
      this.listData = res.data;
      this.randomIndex = Math.random();
    },
    // 搜索事件
    search() {
      const searchKey = this.searchForm.searchKey;
      let data = [];
      if (!searchKey) {
        this.getdata();
        return;
      }
      this.listData.map((item, index) => {
        let keys = Object.keys(item);
        for (let i = 0; i < keys.length; i++) {
          const element = item[keys[i]].toString();
          if (element.indexOf(searchKey) != -1) {
            data.push(item);
            break;
          }
        }
      });
      this.listData = data;
      this.randomIndex = Math.random();
    },
    //显示编辑界面
    handleEdit: function(index, row) {
      this.editFormVisible = true;
      if (row.id) {
        this.title = "修改";
        this.editForm = { ...row };
      } else {
        this.title = "添加";
        this.editForm = {
          DrillholeName: "",
          Northing: "",
          Easting: "",
          Surface: "",
          TopElev: "",
          BotElev: "",
          TopDepth: "",
          BotDepth: "",
          Thick: "",
          StrataName: "",
          StrataNameFull: "",
          BedName: "",
          COAL_THK: "",
          CUM_COAL_THK: "",
          CUM_STRIP_RATIO: ""
        };
      }
    },
    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs.editForm.validate(vaild => {
        if (vaild) {
          const data = {
            ...editData,
            id: new Date().getTime()
          };
          if (this.title === "修改") {
            this.timeOutHandle();
            this.$set(this.listData, this.editForm.index, data);
          } else {
            this.timeOutHandle();
            this.$set(this.listData, this.listData.length, data);
          }
          this.editFormVisible = false;
        }
      });
    },
    // 删除
    deleteUser(index, row) {
      this.$confirm("确定要删除吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.timeOutHandle();
          this.listData.splice(index, 1);
          this.$message({
            type: "success",
            message: "已删除"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.$refs.editForm.clearValidate();
      this.editFormVisible = false;
    }
  }
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>
